
import React, { useState } from 'react';
import { memo, useCallback } from 'react';
import { Select } from '@library';
import useControlOptions from '../../hooks/useControlOptions';
import { Form, Input, Radio, Modal } from 'antd';
import { javascript } from '@codemirror/lang-javascript';
import CodeMirror from '@uiw/react-codemirror';
import Icon from './../icon/Icon';
import { ChartsProps } from './Charts';
import { example } from './data';

const FormItem = Form.Item;
const dataSource = [
  { id: 'line', label: '折线图', value: 'line' },
  { id: 'bar', label: '柱状图', value: 'bar' },
  { id: 'pie', label: '饼图', value: 'pie' },
];

const screenIcon: React.CSSProperties = {
  position: 'absolute',
  right: 0,
  top: '20px'
};

const extensions = [javascript({ jsx: true })];

export default memo(
  () => {
    const { options, changeFormItemProps, changeControlProps } = useControlOptions<ChartsProps>('codeProps');

    const [visible, setVisible] = useState(false);
    const [codeMirrorValue, setCodeMirrorValue] = useState('');

    const onChangeName = useCallback((e) => changeFormItemProps('name', e.target.value), [changeFormItemProps]);

    const formItemProps = options.formItemProps;

    function show() {
      setVisible(true);
      setCodeMirrorValue(example[options.chartsProps?.type!] || '');
    }

    function onOk() {
      setVisible(false);
    }

    const onChangeStyle = useCallback(
      (e, attr) => {
        changeFormItemProps('style', { ...formItemProps?.style, [attr]: e.target.value });
      },
      [changeFormItemProps, formItemProps]
    );

    const onChangeControlProps = useCallback((key: string | any, value?: string) =>
      changeControlProps(
        'chartsProps',
        typeof key === 'string' ? { ...options.chartsProps, [key]: value } : { ...options.chartsProps, ...key },
        true
      ), [changeControlProps, options.chartsProps]);

    return (
      <>
        <FormItem label="数据绑定ID" tooltip="数据存储的名称/英文/必填">
          <Input onChange={onChangeName} value={formItemProps?.name as string} />
        </FormItem>

        <FormItem label="数据url">
          <Input placeholder="请输入数据url" onChange={(e) => onChangeControlProps?.('url', e.target.value)} value={options.chartsProps?.url as string} />
        </FormItem>

        <FormItem label="query">
          <Input placeholder="请输入query" onChange={(e) => onChangeControlProps?.('query', e.target.value)} value={options.chartsProps?.query as string} />
        </FormItem>

        <FormItem label="类型">
          <Select
            value={options?.chartsProps?.type as string}
            fieldNames={{ label: 'label', value: 'value' }}
            dataSource={dataSource}
            onSelect={(e: any) => onChangeControlProps('type', e)}
            url=""
            placeholder="请选择类型"
          />
        </FormItem>

        <div style={{ position: 'relative' }}>
          <FormItem label='配置示例(更改无效)' tooltip="配置示例仅参考">
            <CodeMirror
              value={example[options.chartsProps.type!]}
              onChange={() => { }} />
          </FormItem>
          <Icon
            style={screenIcon}
            icon='&#xe67c;'
            onClick={show} />
        </div>

        <FormItem label="字段占比">
          <Radio.Group value={formItemProps?.style?.width} onChange={(e) => onChangeStyle(e, 'width')}>
            <Radio.Button value='25%'>25%</Radio.Button>
            <Radio.Button value='50%'>50%</Radio.Button>
            <Radio.Button value='75%'>75%</Radio.Button>
            <Radio.Button value='100%'>100%</Radio.Button>
          </Radio.Group>
        </FormItem>

        <FormItem label="高度">
          <Input placeholder="请输入高度" onChange={(e) => onChangeStyle(e, 'height')} value={formItemProps?.style?.height as string} />
        </FormItem>

        <Modal
          visible={visible}
          title='示例'
          width={1000}
          onCancel={() => setVisible(false)}
          onOk={onOk}>
          <CodeMirror
            extensions={extensions}
            onChange={() => { }}
            value={codeMirrorValue} />
        </Modal>

      </>
    );
  }
);
